import React from 'react';
import CharacterCard from './CharacterCard';
import { CharacterListItemProps } from './models/types';

const CharacterListItem: React.FC<CharacterListItemProps> = ({ characters }) => {

    return(
        <ul className="character-list">
            {characters && characters.map(({ id, name, image, status, species }) => 
                <li key={id} style={{ marginBottom: '20px' }}>
                    <CharacterCard
                        name={name}
                        image={image}
                        status={status}
                        species={species}
                    />
                </li>
            )}
        </ul>
    );
};

export default CharacterListItem;